<template>
  <div>
    <div class="header">
      <h1>湖中大论坛访问统计</h1>
      <div class="showTime">当前时间：2020年3月17日-0时54分14秒</div>
    </div>

    <div style="display:flex;" class="chart">
      <div id="line1"></div>
      <div id="pie1"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "123",
      result: [110, 125, 253, 222, 300, 320, 330],
      woman: 120,
      man: 105,
    };
  },
  mounted() {
    this.time(),
      // this.line();
      this.pie1();
    this.line1();
  },
  // 基于准备好的dom，初始化echarts实例
  methods: {
    time() {
      var t = null;
      t = setTimeout(time, 1000); //開始运行
      function time() {
        clearTimeout(t); //清除定时器
        var dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        document.querySelector(".showTime").innerHTML =
          "当前时间：" +
          y +
          "年" +
          mt +
          "月" +
          day +
          "日-" +
          h +
          "时" +
          m +
          "分" +
          s +
          "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行
      }
    },
    // line() {
    //   var myChart = this.$echarts.init(document.getElementById("line"));
    //   var option = {
    //     xAxis: {
    //       type: "category",
    //       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    //     },
    //     yAxis: {
    //       type: "value",
    //     },
    //     series: [
    //       {
    //         data: this.result,
    //         type: "line",
    //         smooth: true,
    //       },
    //     ],
    //   };
    //   myChart.setOption(option);
    //   option.series[0].data.push({ value: 111 });
    // },
    // pie() {
    //   var myChart = this.$echarts.init(document.getElementById("pie"));
    //   // 绘制图表

    //   var option = {
    //     title: {
    //       text: "访客男女比例",
    //       subtext: "人数",
    //       left: "center",
    //     },
    //     tooltip: {
    //       trigger: "item",
    //       formatter: "{a} <br/>{b} : {c} ({d}%)",
    //     },
    //     legend: {
    //       bottom: 10,
    //       left: "center",
    //       data: ["女生", "男生"],
    //     },
    //     series: [
    //       {
    //         type: "pie",
    //         radius: "65%",
    //         center: ["50%", "50%"],
    //         selectedMode: "single",
    //         data: [
    //           {
    //             value: this.man,
    //             name: "男生",
    //             label: {
    //               // formatter: [
    //               //   "{title|{b}}{abg|}",
    //               //   "  {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}",
    //               //   "{hr|}",
    //               //   "  {Sunny|}{value|202}{rate|55.3%}",
    //               //   "  {Cloudy|}{value|142}{rate|38.9%}",
    //               //   "  {Showers|}{value|21}{rate|5.8%}",
    //               // ].join("\n"),
    //               backgroundColor: "#eee",
    //               borderColor: "#777",
    //               // borderWidth: 1,
    //               borderRadius: 4,
    //               rich: {
    //                 title: {
    //                   color: "#eee",
    //                   align: "center",
    //                 },
    //                 abg: {
    //                   backgroundColor: "#333",
    //                   width: "100%",
    //                   align: "right",
    //                   height: 25,
    //                   borderRadius: [4, 4, 0, 0],
    //                 },
    //                 Sunny: {
    //                   height: 30,
    //                   align: "left",
    //                   // backgroundColor: {
    //                   //   image: weatherIcons.Sunny,
    //                   // },
    //                 },
    //                 Cloudy: {
    //                   height: 30,
    //                   align: "left",
    //                   // backgroundColor: {
    //                   //   image: weatherIcons.Cloudy,
    //                   // },
    //                 },
    //                 Showers: {
    //                   height: 30,
    //                   align: "left",
    //                   // backgroundColor: {
    //                   //   image: weatherIcons.Showers,
    //                   // },
    //                 },
    //                 weatherHead: {
    //                   color: "#333",
    //                   height: 24,
    //                   align: "left",
    //                 },
    //                 hr: {
    //                   borderColor: "#777",
    //                   width: "100%",
    //                   borderWidth: 0.5,
    //                   height: 0,
    //                 },
    //                 value: {
    //                   width: 20,
    //                   padding: [0, 20, 0, 30],
    //                   align: "left",
    //                 },
    //                 valueHead: {
    //                   color: "#333",
    //                   width: 20,
    //                   padding: [0, 20, 0, 30],
    //                   align: "center",
    //                 },
    //                 rate: {
    //                   width: 40,
    //                   align: "right",
    //                   padding: [0, 10, 0, 0],
    //                 },
    //                 rateHead: {
    //                   color: "#333",
    //                   width: 40,
    //                   align: "center",
    //                   padding: [0, 10, 0, 0],
    //                 },
    //               },
    //             },
    //           },
    //           { value: this.woman, name: "女生" },
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)",
    //           },
    //         },
    //       },
    //     ],
    //   };
    //   myChart.setOption(option);
    // },
    line1() {
      var myChart = this.$echarts.init(document.getElementById("line1"));

      var data = {
        year: [
          [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        ],
      };

      // 2. 指定配置和数据
      var option = {
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
          // 通过坐标轴来触发
          trigger: "axis",
        },
        legend: {
          // 距离容器10%
          right: "10%",
          top: "10%",
          // 修饰图例文字的颜色
          textStyle: {
            color: "#4c9bfd",
          },
          // 如果series 里面设置了name，此时图例组件的data可以省略
          // data: ["邮件营销", "联盟广告"]
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true,
          borderColor: "#012f4a",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 修饰刻度标签的颜色
          axisLabel: {
            color: "rgba(255,255,255,.7)",
          },
          // 去除x坐标轴的颜色
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 修饰刻度标签的颜色
          axisLabel: {
            color: "rgba(255,255,255,.7)",
          },
          // 修改y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: "#012f4a",
            },
          },
        },
        series: [
          {
            name: "访问人数",
            type: "line",
            // 是否让线条圆滑显示
            smooth: true,
            data: this.result,
          },
        ],
      };
      // 3. 把配置和数据给实例对象
      myChart.setOption(option);

      // 重新把配置好的新数据给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    pie1() {
      var myChart = this.$echarts.init(document.getElementById("pie1"));
      var option = {
        legend: {
          top: "90%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        // 注意颜色写的位置
        color: ["#006cff", "#60cda0"],
        series: [
          {
            name: "男女比例",
            type: "pie",
            // 如果radius是百分比则必须加引号
            radius: ["10%", "70%"],
            center: ["50%", "42%"],
            roseType: "radius",
            data: [
              { value: this.man, name: "男生" },
              { value: this.woman, name: "女生" },
            ],
            // 修饰饼形图文字相关的样式 label对象
            label: {
              fontSize: 10,
            },
            // 修饰引导线样式
            labelLine: {
              // 连接到图形的线长度
              length: 10,
              // 连接到文字的线长度
              length2: 10,
            },
          },
        ],
      };

      // 3. 配置项和数据给我们的实例化对象
      myChart.setOption(option);
      // 4. 当我们浏览器缩放的时候，图表也等比例缩放
      window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
      });
    },
  },
};
</script>
<style scoped>
#pie1 {
  width: 600px;
  height: 400px;
  border-radius: 20px;
  background-color: #26367e;
}
#line {
  width: 600px;
  height: 400px;
  border-radius: 20px;
  margin-right: 100px;
}
#line1 {
  width: 600px;
  height: 400px;
  border-radius: 20px;
  margin-right: 100px;
  background-color: #26367e;
}
.header {
  position: relative;
  height: 100px;
  padding-top: 10px;
  /* background:url(../../assets/image/head_bg.png) no-repeat; */
  background: url(../../assets/image/head_bg.png) no-repeat top center #4a5db9;
  background-size: 100% 100%;
}
.el-main {
  background: url(../../assets/image/bg.jpg) no-repeat rgb(143, 141, 141) !important;
  background-size: cover;
  padding: 0px !important;
}
.header h1 {
  text-align: center;
  margin: 10px auto;
  color: white;
  font-size: 30px;
}
.showTime {
  position: absolute;
  top: 10px;
  color: white;

  right: 20px;
}
.chart {
  padding-top: 30px;
}
</style>
